<template>
  <div class="wrap">
    <!-- 公司项目库 -->
    <!-- <el-button type="primary">你好</el-button> -->
    <div class="top">
      <el-card style="height: 100%; position: relative">
        <div style="width: 100%; height: 100%" v-show="radio1 == '堆叠图'">
          <div id="echarsBar"></div>
        </div>
        <div
          style="width: 100%; height: 100%; margin-top: 20px; overflow-y: auto"
          v-show="radio1 == '表  格'"
        >
          <el-table
            height="220"
            stripe
            :data="tableData"
            border
            style="width: 100%"
          >
            <template v-for="(item, index) in fieldListTop">
              <el-table-column
                align="center"
                :key="index"
                :label="item.name"
                :prop="item.value"
                :width="item.width"
                show="true"
                :formatter="item.formatter ? item.formatter : null"
                show-tooltip-when-overflow
              >
              </el-table-column>
            </template>
          </el-table>
        </div>

        <div>
          <el-radio-group
            size="mini"
            style="position: absolute; top: 10px; right: 10px; z-index: 122"
            v-model="radio1"
          >
            <el-radio-button
              style="font-size: 10px"
              label="堆叠图"
            ></el-radio-button>
            <el-radio-button
              style="font-size: 10px"
              label="表  格"
            ></el-radio-button>
          </el-radio-group>
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <el-card>
        新能源一次调频功能推进情况汇总表
        <el-table
          :data="tableRowData"
          stripe
          :row-key="getRowKey"
          border
          @cell-mouse-enter="cellMouseEnter"
          style="width: 100%; margin-top: 20px"
          :span-method="mergeRowMethod"
          :max-height="1000"
          :cell-style="cellClassName"
        >
          <!-- @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave" -->

          <!-- :height="800" -->
          <!-- :height="800"
            :max-height="1000" -->
          <!-- :height="'calc(100vh - 450px)'" -->
          <el-table-column align="center" prop="regulationOrgName">
          </el-table-column>

          <el-table-column
            align="center"
            :label="item.name"
            :prop="item.value"
            :width="item.width"
            v-for="(item, index) in fieldList"
            :key="index"
            show-tooltip-when-overflow
          >
            <template slot="header">
              {{ item.name }}
              <el-popover
                trigger="hover"
                placement="top"
                :open-delay="500"
                @after-enter="renderPie(item.value)"
              >
                <div
                  :ref="item.value"
                  :id="item.value"
                  style="width: 180px; height: 180px"
                ></div>
                <div
                  style="
                    display: inline-block;
                    cursor: pointer;
                    transform: translateY(-1px);
                  "
                  slot="reference"
                  class="name-wrapper"
                >
                  <!-- <i v-if="item.name" class="el-icon-delete"></i> -->
                  <img :src="hover" v-if="item.name" />

                  <!-- hover_1.jpg -->
                </div>
              </el-popover>
              <!-- <div>
                {{ item.name }}<i class="el-icon-delete"></i>
              </div> -->
            </template>
            <!-- <template  #default="{ row }">
              <el-tooltip    effect=" "    popper-class="atooltip" placement="top">
                <template slot="content" >
                  <div  :ref="'pieChart'+row.id"   class="atooltip" id="atooltips" style="background: #c36868;" >
                  </div>
                </template>
                <div>
                  {{ row[item.value] }}
                </div>
              </el-tooltip> -->
            <!-- <template #default="{ row }">
              <el-popover trigger="hover" placement="top" :open-delay="500">
                @after-enter="renderPie(row.id)"

                <div
                  :ref="row.id"
                  :id="row.id"
                  style="width: 200px; height: 200px"
                ></div>
                <div slot="reference" class="name-wrapper">
                  {{ row[item.value] }} <i class="el-icon-delete"></i>
                </div>
              </el-popover>
            </template> -->
          </el-table-column>

          <!-- <el-table-column
                        align="center"
                        prop="name"
  >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="stationNum"
                        label="年龄">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="regulationOrgName"
                        label="区域">
                    </el-table-column> -->
        </el-table>

        <!-- <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="menuRow1" align="center" width="180">
  
            </el-table-column>
            <el-table-column prop="name" align="center" label="姓名">
            </el-table-column>
            <el-table-column prop="amount1" align="center" label="数值 1（元）">
            </el-table-column>
            <el-table-column prop="amount2" align="center" label="数值 2（元）">
            </el-table-column>
            <el-table-column prop="amount3" align="center" label="数值 3（元）">
            </el-table-column>
          </el-table> -->
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  advanceSummaryRegulation,
  getSummaryRegulation,
  queryOrgRegulationRate,
  summaryRegulationTable,
} from "@/api/collection";

export default {
  name: "collection",
  data() {
    return {
      hover: require("@/assets/icon/hover_1.jpg"),
      tableData: [],
      fieldListTop: [
        { name: "调度机构", value: "regulationOrgName" },
        { name: "光伏", value: "pvNum" },
        { name: "风电", value: "windPowerNum" },
        { name: "水电", value: "waterPowerNum" },
        { name: "燃煤", value: "coalBurnNum" },
        { name: "燃气", value: "gasNum" },
        { name: "储能", value: "energyStorageNum" },
        { name: "核电", value: "nuclearPowerNum" },
      ],
      radio1: "堆叠图",
      myCharts: null,
      fieldList: [
        { name: "", value: "regulationNum", width: 300 },
        // { name: "广东", value: "stationNum" },
        // { name: "总调", value: "regulationOrgCode" },
        // { name: "广东", value: "regulationNum" },
      ],
      originData: [
        {
          summaryTypeName: "存量",
          regulationOrgPrFreqInfos: [
            {
              regulationOrgName: "号",
              stationNum: "存量场站数1岁",
              regulationNum: "存量场站数1",
              regulationOrgCode: "1",
            },
            {
              regulationOrgName: "01-2号",
              stationNum: "存量场站数2岁",
              regulationNum: "存量场站数2",
              regulationOrgCode: "2",
            },
            {
              regulationOrgName: "012321号",
              stationNum: "存量场站数3岁",
              regulationNum: "存量场站数3",
              regulationOrgCode: "3",
            },
            {
              regulationOrgName: "01-2号",
              stationNum: "存量场站数4岁",
              regulationNum: "存量场站数4",
              regulationOrgCode: "4",
            },
          ],
        },
        {
          summaryTypeName: "存量",
          regulationOrgPrFreqInfos: [
            {
              regulationOrgName: "总体",
              stationNum: "存量场站数1岁",
              regulationNum: "存量场站数1",
              regulationOrgCode: "1",
            },
            {
              regulationOrgName: "01-2号",
              stationNum: "存量场站数2岁",
              regulationNum: "存量场站数2",
              regulationOrgCode: "2",
            },
            {
              regulationOrgName: "012321号",
              stationNum: "存量场站数3岁",
              regulationNum: "存量场站数3",
              regulationOrgCode: "3",
            },
            {
              regulationOrgName: "01-2号",
              stationNum: "存量场站数4岁",
              regulationNum: "存量场站数4",
              regulationOrgCode: "4",
            },
          ],
        },
        {
          summaryTypeName: "存量",
          regulationOrgPrFreqInfos: [
            {
              regulationOrgName: "今年年完成情况",
              stationNum: "存量场站数1岁",
              regulationNum: "存量场站数1",
              regulationOrgCode: "1",
            },
            {
              regulationOrgName: "01-2号",
              stationNum: "存量场站数2岁",
              regulationNum: "存量场站数2",
              regulationOrgCode: "2",
            },
            {
              regulationOrgName: "012321号",
              stationNum: "存量场站数3岁",
              regulationNum: "存量场站数3",
              regulationOrgCode: "3",
            },
          ],
        },
      ],
      tableRowData: [
        {
          regulationNum: "存量场站数1",
          regulationOrgCode: "1",
          regulationOrgName: "A数据更新中...",
          rowNum: 4,
          stationNum: "存量场站数1岁",
          summaryTypeName: "存量",
        },
        {
          regulationNum: "存量场站数2",
          regulationOrgCode: "2",
          stationNum: "存量场站数2岁",
          summaryTypeName: "存量",
        },
        {
          regulationNum: "存量场站数3",
          regulationOrgCode: "3",
          stationNum: "存量场站数3岁",
          summaryTypeName: "存量",
        },
        {
          regulationNum: "存量场站数4",
          regulationOrgCode: "4",
          stationNum: "存量场站数4岁",
          summaryTypeName: "存量",
        },
        {
          regulationNum: "存量场站数5",
          regulationOrgCode: "5",
          regulationOrgName: "B数据更新中...",
          rowNum: 2,
          stationNum: "存量场站数5岁",
          summaryTypeName: "存量",
        },
        {
          regulationNum: "存量场站数6",
          regulationOrgCode: "6",
          stationNum: "存量场站数5岁",
          summaryTypeName: "存量",
        },
      ],
      echarsData: [],
    };
  },
  watch: {
    radio1(val) {
      if (val === "堆叠图") {
        this.initEchars();
      } else {
        this.getSummaryRegulationTable();
      }
    },
  },
  mounted() {
    this.initEchars();
    this.getAdvanceSummaryRegulation();
    // this.cellMouseEnter();
  },
  created() {
    // this.getAdvanceSummaryRegulation()
  },
  computed: {},
  methods: {
    getRowKey(row) {
      return row.regulationOrgCode;
    },
    async getSummaryRegulationTable() {
      const { data } = await summaryRegulationTable();

      this.tableData = data;
      let aggregate = {
        coalBurnNum: 0,
        energyStorageNum: 0,
        gasNum: 0,
        nuclearPowerNum: 0,
        pvNum: 0,
        regulationOrgId: "9",
        regulationOrgName: "总计",
        waterPowerNum: 0,
        windPowerNum: 0,
      };
      for (let k in aggregate) {
        if (k !== "regulationOrgId" && k !== "regulationOrgName") {
          aggregate[k] = this.tableData.reduce((prev, cur) => {
            return prev + cur[k];
          }, 0);
        }
      }
      // console.log(this.tableData,'aggregate')
      this.tableData.push(aggregate);
    },
    // clearPie(e) {
    //   // 销毁echarts实例
    //   this.$echarts.dispose(this.$refs[`${e}`]);
    // },
    async renderPie(e) {
      // console.log(document.getElementById(`${e}`))
      // console.log(e,'eeeeeeeeeeeeeeeeee')
      let myChart = this.$echarts.init(document.getElementById(`${e}`));
      // console.log(document.getElementById(`${e}`))
      let param = { regulationOrgId: +e.substr(e.length - 1, 1) };
      if (e == "province9") param.regulationOrgId = "";
      // 截取字符串的最后一位
      const { data } = await queryOrgRegulationRate(param);

      let pvNum = !((data.pvNum / (data.pvNum + data.windPowerNum)) * 100)
        ? 0
        : ((data.pvNum / (data.pvNum + data.windPowerNum)) * 100).toFixed(2);
      let windPowerNum = !(
        (data.windPowerNum / (data.pvNum + data.windPowerNum)) *
        100
      )
        ? 0
        : (
            (data.windPowerNum / (data.pvNum + data.windPowerNum)) *
            100
          ).toFixed(2);

      let legendData1 = [
        `风电\u00A0\u00A0 ${
          pvNum == 0 && windPowerNum !== 0 ? 100 : windPowerNum
        }%`,
        `光伏\u00A0\u00A0 ${windPowerNum == 0 && pvNum !== 0 ? 100 : pvNum}%`,
      ];
      let text = `${data.regulationOrgName}投入占比${(
        ((data.pvNum + data.windPowerNum) / data.totalStationNum) *
        100
      ).toFixed(2)}%`;

      let option = {
        title: {
          text,
          left: "left",
          textStyle: {
            // color: "#fff",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            // color: "#fff",
            fontSize: 10,
          },
          data: legendData1,
        },
        series: [
          {
            name: "投入占比",
            type: "pie",
            // 饼图上移
            center: ["50%", "45%"],
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 10,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: data.windPowerNum, name: legendData1[0] },
              { value: data.pvNum, name: legendData1[1] },
            ],
          },
        ],
      };
      //   console.log(document.getElementById("atooltips").style.height,'document.getElementById("atooltips")')
      // setTimeout(()=>{
      myChart.setOption(option);
      // },1000)

      // myChart.setOption(option);
      //   this.myCharts = this.$echarts.init(document.getElementById("atooltips"));
      //   this.myCharts.setOption(option);
      //   window.addEventListener("resize", () => {
      //     this.myCharts.resize();
      //   });
    },
    cellMouseLeave() {},
    cellMouseEnter(row, column, rowIndex, columnIndex) {
      //   console.log(row, column, rowIndex, columnIndex);
      //     setTimeout(()=>{
      //         this.visible = true;
      //     },200)
      // console.log(this.visible,'visible')
      // console.log( rowIndex);
      // this.visible = !this.visible;
      // console.log(this.$refs[`div${row.id}`])
      // this.$nextTick(() => {
      // setTimeout(()=>{
      //   this.renderPie(row.id);
      // },500)
      // })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      // console.log(columnIndex,'columnIndex')
      if (columnIndex == 0) {
        return {
          background: "#f2f2f2",
          borderTop: "1px solid #fff",
        };
      }
    },
    getDataList(arr, header) {
      // console.log(arr, '//////////////////////////////')
      // console.log(header);
      if (!header) return;
      // list数组为表格需要的数组,是表格的一项（表格第一列合并的表格，如：存量，增量）
      let list = [];
      // 确定二级标题
      header.forEach((item) => {
        list.push({ regulationNum: item });
      });
      // 确定首列合并行数
      list[0].rowNum = Object.keys(arr.regulationOrgPrFreqInfos).length;
      // 确定一级标题
      list.forEach((item, index) => {
        item["regulationOrgName"] = arr.summaryTypeName;
      });
      // console.log(Object.entries(arr.regulationOrgPrFreqInfos), 'arrrrrrrrrrrrrrrrrr')
      // 将各省份推入对应的对象中
      Object.entries(arr.regulationOrgPrFreqInfos).forEach(
        ([key, value], index) => {
          // 将 obj 的值插入到 arr 数组的相应对象中
          // console.log(key)
          if (list[index]) {
            // console.log(list[index]);
            // arr[index][`${index+1}name`] = value.map(item=>item.num);
            value
              .map((item) => item.num)
              .forEach((item1, index1) => {
                list[index][`province${index1 + 1}`] = item1;
              });
          }
          // console.log(list, 'listsssssssssssss')
        }
      );

      // 将占比的数据转换为百分比
      list.forEach((item) => {
        // console.log(item.regulationNum,'regulationNumregulationNum')
        // 找到占比的数据
        if (item.regulationNum.indexOf("占比") > -1) {
          for (let k in item) {
            // console.log(item[k],'kkkkkkkkkkkkkkkkkkkkkkkkkkkkk')
            // 找到占比中各省的数据
            if (k.indexOf("province") > -1) {
              item[k] = (item[k] * 100).toFixed(2) + "%";
            }
          }
        }
      });

      return list;
    },
    async getAdvanceSummaryRegulation() {
      const { data } = await advanceSummaryRegulation();
      this.originData = data;
      let a = [];
      // 创建表格第二列的数据list
      let list = [
        [
          "存量场站数",
          "存量一次调频投入数",
          "存量功能投入数占比",
          "今年年底预计总投入数",
        ],
        [
          "增量场站数",
          "增量一次调频投入数",
          "增量功能投入数占比",
          "今年年底预计总投入数",
        ],
        [
          "总场站数",
          "一次调频总投入数",
          "一次调频功能投入占比",
          "今年年底预计总投入数",
        ],
        [
          "今年1月1日之后整站投产场站数",
          "今年1月1日之后增量一次调频投入数",
          "今年增量一次调频功能投入占比",
        ],
      ];
      // console.log(this.originData,'originData')
      // 获取表格横向的表头数据

      // console.log(this.originData, 'this.originData')
      // 处理后端返回的数据，将其分别放入处理数据的方法中

      this.originData.forEach((item, index) => {
        // 计算合计列的数据，并将其加入至表格的数组中
        function reduceSum(arr) {
          return arr.reduce((prev, cur) => +prev + Number(cur.num), 0);
        }

        const interpositionObj = {
          regulationOrgId: "9",
          regulationOrgName: "总计",
        };
        // console.log(this.originData[0].regulationOrgPrFreqInfos, 'this.originData[0].regulationOrgPrFreqInfos')
        const infoArray = []; // ['station_num_str', 'regulation_num_str', 'regulation_num_ratio', 'estimate_num_str']  // regulation_num_ratio为占比行

        for (let k in this.originData[0].regulationOrgPrFreqInfos) {
          infoArray.push(k);
        }
        // 计算合计列
        infoArray.forEach((item1) => {
          let computer = (
            item.regulationOrgPrFreqInfos.regulation_num_str[
              item.regulationOrgPrFreqInfos.regulation_num_str.length - 1
            ].num /
            item.regulationOrgPrFreqInfos.station_num_str[
              item.regulationOrgPrFreqInfos.station_num_str.length - 1
            ].num
          )
            .toString()
            .slice(1);
          if (item1 == "regulation_num_ratio") {
            item.regulationOrgPrFreqInfos[item1].push({
              num: computer == "aN" ? 0 : computer,
              ...interpositionObj,
            });
          } else {
            item.regulationOrgPrFreqInfos[item1].push({
              num: reduceSum(item.regulationOrgPrFreqInfos[item1]),
              ...interpositionObj,
            });
          }
        });

        // item.regulationOrgPrFreqInfos.estimate_num_str.push({
        //   num: reduceSum(item.regulationOrgPrFreqInfos.estimate_num_str),...interpositionObj
        // })

        // item.regulationOrgPrFreqInfos.regulation_num_str.push({
        //   num: reduceSum(item.regulationOrgPrFreqInfos.regulation_num_str),...interpositionObj
        // })
        // item.regulationOrgPrFreqInfos.station_num_str.push({
        //   num: reduceSum(item.regulationOrgPrFreqInfos.station_num_str),...interpositionObj
        // })
        // item.regulationOrgPrFreqInfos.regulation_num_ratio.push({
        //   num: computer == 'aN' ? 0 : computer,...interpositionObj
        // })
        // 将总计加入至数组中后，调用数据处理函数，将数据处理为表格所需的数据格式
        a.push(this.getDataList(item, list[index]));
      });
      // console.log(a, 'aaaaaaaaaaa')
      // 将返回的数据进行扁平化处理和非空判断
      this.tableRowData = a.filter((item) => item).flat(Infinity);
      this.tableRowData.forEach((item, index) => {
        item["id"] = index + 1;
      });
      // console.log(this.tableRowData, "tableRowData");
      // 处理table组件遍历的每行数据的数组fieldList即表头数据，使其与处理后的数据格式对应
      let objArr =
        this.originData[0].regulationOrgPrFreqInfos.estimate_num_str.map(
          (item) => item.regulationOrgName
        );

      // console.log(objArr, 'objArr')
      objArr.forEach((item, index) => {
        this.fieldList.push({
          name: item,
          value: `province${index + 1}`,
        });
      });

      // this.loadRowData()
    },
    async getSummaryRegulation() {
      const res = await getSummaryRegulation();
      this.echarsData = res.data;
      console.log(res);
      console.log(this.echarsData, "echarsData");
      // this.loadRowData()
    },

    renderHeader(h, { column, $index }) {
      // 新建一个 span
      let span = document.createElement("span");
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 10;
      // 移除 document 中临时的 span
      document.body.removeChild(span);
      return h("span", column.label);
    },
    // 合并行
    mergeRowMethod({ row, column, rowIndex, columnIndex }) {
      // columnIndex 代表列数，从0开始计数,我们要合并的字段属于第一列，取0
      if (columnIndex == 0) {
        return {
          rowspan: row.rowNum, // 待合并行数 -- 合并的行数长度就等于之前赋值的子数据的长度；未赋值的即表示0，不显示
          colspan: row.rowNum > 0 ? 1 : 0, // 待合并列数 -- 合并的列数自身占一列，被合并的要返回0，表示不显示
        };
      }
    },
    async initEchars() {
      const res = await getSummaryRegulation();
      this.echarsData = res.data;
      let legend = this.echarsData.map((item) => item.regulationOrgName);
      let xAxis = [];
      this.echarsData.map((item) => {
        if (item.stationUnitsInfos.length) {
          item.stationUnitsInfos.map((e) => {
            xAxis.push(e.stationTypeName);
          });
        }
      });
      let headerList = [
        "hydroelectric",
        "fireCoal",
        "fuelGas",
        "accumulationEnergy",
        "nuclearPower",
        "photovoltaic",
        "windPower",
      ];
      let xAxisData = ["水电", "燃煤", "燃气", "储能", "核电", "光伏", "风电"];
      // this.echarsData.forEach((item, index) => {
      //   item.stationUnitsInfos.forEach((e, i) => {
      //     e["name"] = xAxisData[i];
      //     e["id"] = index + 1;
      //   });
      // });

      // this.tableData = Array.from({ length: 5 }, () =>
      //   headerList.reduce((obj, item) => {
      //     obj[item] = "1";
      //     return obj;
      //   }, {})
      // );
      // const arrList = []
      // this.echarsData.forEach(item=>{
      //  let arr = item.stationUnitsInfos.map((e,i)=>{
      //    return e.unitsNum
      //   })
      //   arrList.push(arr)
      // })
      // console.log(arrList,'arrList')
      // console.log(this.tableData,'tableData')

      // this.tableData.forEach((item,index)=>{
      //   item['name'] = xAxisData[index]
      // })
      // console.log(this.tableData,'tableData')
      // console.log(xAxis, "xAxis");
      // console.log(legend, "legend");
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: [
          "#ef755a",
          "#f5ab2b",
          "#fcc96c",
          "#ce8834",
          "#007da8",
          "#3da9cb",
          "#75b0e7",
        ],
        legend: {
          // data: [
          //   "总调",
          //   "广东",
          //   "广西",
          //   "云南",
          //   "贵州",
          //   "海南",
          //   "广州",
          //   "深圳",
          // ],
          data: legend,
          icon: "circle", //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            // data: xAxis,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：台",
            left: "3%",
            nameTextStyle: {
              color: "#83848c",
              nameLocation: "start",
              padding: [0, 0, 0, -50],
            },
          },
        ],
        series: [],
      };
      this.echarsData.forEach((item, index) => {
        let data = new Array(7).fill(0);
        if (item.stationUnitsInfos.length) {
          item.stationUnitsInfos.forEach((e) => {
            data[e.stationType - 1] = e.unitsNum;
          });
        }
        option.series.push({
          name: item.regulationOrgName,
          type: "bar",
          stack: "Ad",
          barWidth: 80,
          emphasis: {
            focus: "series",
          },
          data,
        });
      });
      // console.log(option.series, "option.series");
      this.myChart = this.$echarts.init(document.getElementById("echarsBar"));
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initEchars1() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };
      //   console.log(document.getElementById("atooltips").style.height,'document.getElementById("atooltips")')
      this.myCharts = this.$echarts.init(document.getElementById("atooltips"));
      if (this.myCharts == null) {
        this.myCharts = this.$echarts.init(
          document.getElementById("atooltips")
        );
      }

      //   this.myCharts = this.$echarts.init(document.getElementById("atooltips"));
      this.myCharts.setOption(option);
      window.addEventListener("resize", () => {
        this.myCharts.resize();
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.first-column {
  background: #000;
}
.wrap {
  width: 100%;
  height: 100%;
  /* background-color: rgb(176, 240, 240); */
}
.top {
  // height: 38%;
  height: 290px;
  background-color: rgb(176, 240, 240);
  #echarsBar {
    display: block;
    width: 100%;
    height: 100%;
    // background: #000;
  }
}
.bottom {
  margin-top: 20px;
  height: 62%;
}
::v-deep .el-card__body {
  height: 100%;
}

::v-deep .el-table .el-table__cell {
  padding: 1.5px 0;
}
::v-deep .el-table thead {
  height: 40px;
}

::v-deep .el-tooltip__popper .is-light {
  // width: 300px !important ;
  // height: 300px !important;
  border: 1px solid #5fa5e2 !important;
}

.atooltip {
  width: 300px;
  height: 260px;
  border: 1px solid #5fa5e2;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// .atooltip  .el-toopltip__popper {
// background: #e9f5ff !important;
// color: #000 !important;
// border-left: 5px solid #5fa5e2 !important ;
// }
// .atooltip  .el-toopltip__popper[x-placement^=top] .popper__arrow {
// border-top-color: #e9f5ff !important;
// }
#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}
::v-deep .el-radio-button__inner {
  background: rgba(255, 255, 255, 0.23);
}
</style>
